import React, { Component } from "react";
import "./App.css";

import { HashRouter as Router, Route, NavLink } from "react-router-dom";

class Home extends Component {
  componentDidMount() {
    console.log(this.props.match.params);
    // console.log(this.props);
    // const params = new URLSearchParams(this.props.location.search);
    // console.log(params.get("id"));
    // console.log(params.get("name"));
  }
  render() {
    return <h2>home组件</h2>;
  }
}
const About = () => <h2>About组件</h2>;

export default class App extends Component {
  render() {
    return (
      <Router>
        <ul>
          <li>
            {/* <NavLink to="/home?id=1&name=fly">home</NavLink> */}
            <NavLink to="/home/1/fly">home</NavLink>
          </li>
          <li>
            <NavLink to="/about">about</NavLink>
          </li>
        </ul>

        <Route path="/home/:id/:name" exact component={Home}></Route>
        <Route path="/about" component={About}></Route>
      </Router>
    );
  }
}
